<script setup lang="ts" name="BpmnAligns">
import { warnMessage } from '@/utils/message'
import EventEmitter from '@/utils/EventEmitter'

const modeling = ref(null)
const selection = ref(null)
const align = ref(null)

const alignElements = (type) => {
  if (modeling.value && selection.value) {
    const SelectedElements = selection.value.get()
    if (!SelectedElements || SelectedElements.length <= 1) {
      return warnMessage('请按住 Shift 键选择多个元素对齐')
    }
    align.value.trigger(SelectedElements, type)
  }
}

EventEmitter.on('modeler-init', (modeler) => {
  modeling.value = modeler.get('modeling')
  selection.value = modeler.get('selection')
  align.value = modeler.get('alignElements')
})
</script>

<template>
  <div class="button-group">
    <el-tooltip effect="light" content="左对齐" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('left')"><svg-icon icon="ri:align-left"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="居中对齐" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('center')"><svg-icon icon="ri:align-center"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="右对齐" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('right')"><svg-icon icon="ri:align-right"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="顶部对齐" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('top')"><svg-icon icon="ri:align-top"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="垂直居中" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('middle')"><svg-icon icon="ri:align-vertically"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="底部对齐" placement="bottom" :hide-after="100">
      <div class="item-button" @click="alignElements('bottom')"><svg-icon icon="ri:align-bottom"></svg-icon></div>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 2px 3px;
  border-right: 1px solid var(--el-border-color-lighter);

  .item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 2px;
    border-radius: 2px;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;

      .el-icon {
        color: var(--el-text-color-disabled);
      }

      &:hover {
        background-color: transparent;

        .el-icon {
          color: var(--el-text-color-disabled);
        }
      }
    }

    &:hover {
      background-color: var(--el-color-primary-light-9);

      .el-icon {
        color: var(--el-color-primary);
      }
    }

    .el-icon {
      font-size: 20px !important;
    }
  }
}
</style>
